<template>
  <view class="top-comment">
    <view class="public-content">
      <top-nav-bar backgroundColor="transparent" />
      <view class="public-title">
        {{ $t('index.comment.title') }}
      </view>
      <view class="public-desc">
        {{ $t('index.comment.desc') }}
      </view>
      <view
        v-for="item in list"
        :key="item.id"
        class="list-box">
        <view class="title-box">
          <view class="item-text">
            <text>{{ item.userName }}</text>
            <text>{{ item.commentTime }}</text>
          </view>
          <view class="des">{{ item.userDesc }}</view>
        </view>
        <view class="content-box">
          <view class="text">
            {{ item.commentContent }}
          </view>
          <view class="btn"> #{{ item.tag }} </view>
        </view>
      </view>
    </view>
    <foot-page />
  </view>
</template>

<script setup>
  import http from '@/utils/request.js'
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'

  const list = ref([])

  onLoad(async () => {
    const res = await http.get('/api/free/service/commentUser/list')
    list.value = res
  })
</script>

<style lang="scss" scoped>
  .top-comment {
    background: url('/static/bg/bg-top.png') no-repeat top center, #e2ecf8;
    background-size: 100%;
  }
  .public-content {
    // background: #e2ecf8;
    padding-bottom: 10rpx;
  }

  .public-title {
    margin-top: 20rpx;
  }

  .public-desc {
    border-bottom: 1px solid #eee;
  }

  .list-box + .list-box {
    margin-top: 32rpx;
  }

  .list-box {
    width: 100%;
    background: #fff;
    border-radius: 16rpx;

    .title-box {
      .item-text {
        padding: 48rpx 48rpx 0;
        display: flex;
        justify-content: space-between;
        line-height: 74rpx;

        text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
          text-align: left;
          font-style: normal;
          text-transform: none;

          &:first-child {
            font-weight: bold;
            font-size: 32rpx;
            color: #333333;
          }
        }
      }

      .des {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
        text-align: left;
        font-style: normal;
        text-transform: none;
        border-bottom: 2rpx solid #e2ecf8;
        padding: 10rpx 48rpx 31rpx;
        margin-bottom: 34rpx;
      }
    }

    .content-box {
      padding: 0 48rpx 48rpx;
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      .text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        line-height: 38rpx;
        color: #666666;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }

      .btn {
        margin-top: 60rpx;
        background: #3462fe52;
        border-radius: 16rpx;
        border: 2rpx solid #3462fe;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #3462fe;
        text-align: center;
        font-style: normal;
        text-transform: none;
        padding: 20rpx;
      }
    }
  }
</style>
